iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
Modern Web

React應用記錄誌系列 第 13

Day13 Redux Dev Tools

  • 分享至 

  • xImage
  •  

Redux-Devtools 提供了 Redux 應用程序的調試平台,可以方便檢查每個狀態和操作負載
,以下介紹如何安裝使用。

安裝:

  1. 在chrome web store 加入 Redux Dev Tools

https://ithelp.ithome.com.tw/upload/images/20220928/20139800MvFnSAtIey.png

2.在Redux應用程式createstore()中添加

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

連結網址
https://github.com/reduxjs/redux-devtools/tree/main/extension#installation

在網頁中的With Redux/ Basic store下

const store = createStore(
reducer, /* preloadedState, */

  • window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION()
    );

複製程式碼
window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION()
至你應用程式中createStore的程式碼中

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

安裝完成後,在頁面按右鍵即會出現Redux Dev Tools

https://ithelp.ithome.com.tw/upload/images/20220928/20139800ZEJHd0hP9Q.png

Redux DevTools可讓你查看Redux應用程式中的action,state的數據狀態。


上一篇
Day12 實作練習Axios
下一篇
Day14 Redux Toolkit介紹
系列文
React應用記錄誌31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言